<template>
  <div class="step2 l-form-list">
    <div class="form-blank-style">
      <mt-actionsheet :actions="actions" v-model="chooseImgVisible"></mt-actionsheet>
      <selectBranch
        :listData="branchNameListData"
        :defaultData="formData.bankCode"
        :selectBranchVisible="selectBranchVisible"
        @selectBranch="selectBranch"
        @selectBranchBack="showBranchName(false,'noPublic')"
      />

      <selectBranch
        :listData="branchNameListDataToPublic"
        :defaultData="formData.reserveBankCode"
        :selectBranchVisible="selectBranchToPublicVisible"
        @selectBranch="selectBranchToPublic"
        @selectBranchBack="showBranchName(false,'toPublic')"
      />
      <div class="prompt">
        <span class="sl-flbgz"></span>
        <div class="prompt-text">重要信息请仔细确认填写，任何一项信息有误都会导致结算不到账！</div>
      </div>
      <div>
        <div class="ct ct-last">
          <div class="input-item" v-if="merchantType == '01'">
            <div class="itemBox">
              <div class="item">
                <div class="label required">账户类型</div>
                <div class="pick-value select">对私账户</div>
              </div>
            </div>
          </div>
          <div
            class="input-item"
            v-else-if="merchantType == '02'&&this.initialData.detailModel.licenseType == '0'"
          >
            <div class="itemBox">
              <div class="item">
                <div class="label required">账户类型</div>
                <div class="pick-value select">对公账户</div>
              </div>
            </div>
          </div>
          <div class="input-item" v-else>
            <div class="itemBox">
              <div class="item">
                <div class="label required">账户类型</div>
                <div
                  class="pick-value select no-select"
                  v-if="query.code=='1000170311'||query.code=='1000170312'||query.code=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1 || query['rateToOpenPay']"
                >{{this.formData.accountType?showIdName(accountType.data,this.formData.accountType):accountType.tip}}</div>
                <div
                  :class="`pick-value select ${this.formData.accountType?'':'no-select'}`"
                  @click="showPicker('accountType')"
                  v-else
                >{{this.formData.accountType?showIdName(accountType.data,this.formData.accountType):accountType.tip}}</div>
                <i class="zhk-list_rarrow"></i>
                <awesome-picker
                  ref="accountType"
                  :textTitle="accountType.textTitle"
                  :data="accountType.data"
                  :anchor="accountType.anchor"
                  @confirm="(v)=>handleConfirm('accountType',v,accountType.data)"
                ></awesome-picker>
              </div>
            </div>
          </div>
          <div class="input-item no-border" v-if="formData.accountType == '01' && merchantType != '01'">
            <div class="itemBox">
              <div class="item">
                <div class="label required">结算账户</div>
                <div
                  class="pick-value select no-select"
                  v-if="query.code=='1000170311'||query.code=='1000170312'||query.code=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1 || query['rateToOpenPay']"
                >{{this.formData.settleAccountsType?showIdName(settleAccountsType.data,this.formData.settleAccountsType):settleAccountsType.tip}}</div>
                <div
                  :class="`pick-value select ${this.formData.settleAccountsType?'':'no-select'}`"
                  @click="showPicker('settleAccountsType')"
                  v-else
                >{{this.formData.settleAccountsType?showIdName(settleAccountsType.data,this.formData.settleAccountsType):settleAccountsType.tip}}</div>
                <i class="sl-right_arrow"></i>
                <awesome-picker
                  ref="settleAccountsType"
                  :textTitle="settleAccountsType.textTitle"
                  :data="settleAccountsType.data"
                  :anchor="settleAccountsType.anchor"
                  @confirm="(v)=>handleConfirm('settleAccountsType',v,settleAccountsType.data)"
                ></awesome-picker>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 对公账户信息 -->
      <div v-if="merchantType =='03' && formData.accountType == '01'">
        <div class="tt tt-body">对公账户信息</div>
        <div class="ct ct-last ct-body">
          <div class="upload-item">
            <div class="item">
              <div class="item-tt required">对公户凭证照</div>
              <div class="item-ct">
                <div class="item-lft">
                  <div class="warn-text">如开户许可证、银行电子回执单、银行印鉴卡等，需要体现对公户信息及银行签章</div>
                  <div class="img-button">
                    <div
                      class="look-img look-img1"
                      @click="()=>lookFigure('如开户许可证、银行电子回执单、银行印鉴卡等，需要体现对公户信息及银行签章','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/461761556267437.png')"
                    >查看示例图</div>
                  </div>
                </div>
                <div class="item-rt">
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzIndustryLicensePhoto"
                    @click="chooseImg('yzIndustryLicensePhoto')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                  </div>
                  <div
                    class="store-head-box border-solid"
                    v-else-if="formData.yzIndustryLicensePhoto"
                  >
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzIndustryLicensePhoto,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzIndustryLicensePhoto)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzIndustryLicensePhoto')"
                      v-if="query.code!='1000170311'"
                    ></span>
                  </div>
                   <div class="unload">{{ formData.yzIndustryLicensePhoto ? '凭证照片' : '上传照片' }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required">公户开户名</div>
                <inputClear
                  :disabled="(merchantType =='03' && formData.accountType == '01')||query.code=='1000170311'||query.code=='1000170312'||query.code=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1 || query['rateToOpenPay']"
                  class="input"
                  v-model="formData.reserveBankCertName"
                  placeholder="请填写公户开户名"
                  :attr="{ maxlength: 64}"
                ></inputClear>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required">公户银行账号</div>
                <inputClear
                  class="input"
                  @blur="fieldValidate('reserveBankCardNo')"
                  v-model="formData.reserveBankCardNo"
                  placeholder="请填写公户银行账号"
                  :attr="{ maxlength: 28}"
                ></inputClear>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required">公户开户行所在地区</div>
                <selectAreaPicker
                  @handleOk="selectAreaPickerOkToPublic"
                  @resOk="branchAreaOk('toPublic')"
                  type="branch"
                  :initialData="storeAreaDefaultDataToPublic"
                  :detailData="initialData"
                  :query="query"
                />
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required">公户开户银行</div>
                <div
                  class="pick-value select no-select"
                  v-if="query.code=='1000170311'"
                >{{formData.reserveBankId?showIdName(bankToPublic.data,formData.reserveBankId):bankToPublic.tip}}</div>
                <div
                  :class="`pick-value select ${this.formData.reserveBankId?'':'no-select'}`"
                  @click="showPicker('bankToPublic')"
                  v-else
                >{{formData.reserveBankId?showIdName(bankToPublic.data,formData.reserveBankId):bankToPublic.tip}}</div>
                <i class="sl-right_arrow"></i>
                <awesome-picker
                  v-if="bankToPublicVisible"
                  ref="bankToPublic"
                  :textTitle="bankToPublic.textTitle"
                  :data="bankToPublic.data"
                  :anchor="bankToPublic.anchor"
                  @confirm="(v)=>handleConfirm('bankToPublic',v,bankToPublic.data)"
                ></awesome-picker>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required">公户支行名称</div>
                <div
                  class="pick-value select no-select"
                  v-if="query.code=='1000170311'"
                >{{formData.reserveBranchName?formData.reserveBranchName:'请选择'}}</div>
                <div
                  :class="`pick-value select ${this.formData.reserveBranchName?'':'no-select'}`"
                  @click="showBranchName(true,'toPublic')"
                  v-else
                >{{formData.reserveBranchName?formData.reserveBranchName:'请选择'}}</div>
                <i class="sl-right_arrow"></i>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required">公户联行号</div>
                <inputClear
                  :disabled="query.code == '1000170311'"
                  class="input"
                  @blur="fieldValidate('reserveContactLine')"
                  v-model="formData.reserveContactLine"
                  placeholder="请填写公户联行号"
                  :attr="{ maxlength: 12}"
                ></inputClear>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 对私账户信息 -->
      <div>
        <div class="tt tt-body" v-html="formData.accountType == '02'?'对公账户信息':'对私账户信息'"></div>
        <!-- <div :class="`ct ${formData.settleAccountsType != '2'?'ct-last':''}`"> -->
        <div class="ct ct-last ct-body">
          <div class="upload-item" v-if="formData.accountType != '02'">
            <div class="item">
              <div class="item-tt required">银行卡正面照</div>
              <div class="item-ct">
                <div class="item-lft">
                  <div class="warn-text">请注意证件上的文字能够清晰可见</div>
                  <div class="img-button">
                    <div
                      class="look-img"
                      @click="()=>lookFigure('请注意证件上的文字能够清晰可见','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/485821556266795.png')"
                    >查看示例图</div>
                  </div>
                </div>
                <div class="item-rt">
                  <template v-if="query.code||query['page'] == 'ratesChangeApply'">
                    <div
                      class="store-head-box border-dashed"
                      v-if="!formData.yzImgBankcardA"
                      @click="chooseImg('yzImgBankcardA')"
                    >
                      <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                    </div>
                    <div class="store-head-box border-solid" v-else-if="formData.yzImgBankcardA">
                      <img
                        :src="CommonUtil.imgUrlFormate(formData.yzImgBankcardA,{w:'330',h:'206'})"
                        alt
                        @click="showImg(formData.yzImgBankcardA)"
                      />
                      <span
                        class="sl-cwts"
                        @click="delImage('yzImgBankcardA')"
                        v-if="query.code!='1000170311'"
                      ></span>
                    </div>
                     <div class="unload">{{ formData.yzImgBankcardA ? '正面照片' : '上传照片' }}</div>
                  </template>
                  <template v-else>
                    <div
                      class="store-head-box border-dashed"
                      v-if="!formData.yzImgBankcardA"
                      @click="chooseImg('yzImgBankcardA','ocr_bankcard')"
                    >
                      <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                    </div>
                    <div class="store-head-box border-solid" v-else-if="formData.yzImgBankcardA">
                      <img
                        :src="CommonUtil.imgUrlFormate(formData.yzImgBankcardA,{w:'330',h:'206'})"
                        alt
                        @click="showImg(formData.yzImgBankcardA)"
                      />
                      <span
                        class="sl-cwts"
                        @click="delImage('yzImgBankcardA')"
                        v-if="query.code!='1000170311'"
                      ></span>
                    </div>
                     <div class="unload">{{ formData.yzImgBankcardA ? '正面照片' : '上传照片' }}</div>
                  </template>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="upload-item" v-if="formData.accountType == '02'">
            <div class="item">
              <div class="item-tt required">对公户凭证照</div>
              <div class="item-ct">
                <div class="item-lft">
                  <div class="warn-text">如开户许可证、银行电子回执单、银行印鉴卡等，需要体现对公户信息及银行签章</div>
                  <div class="img-button">
                    <div
                      class="look-img look-img1"
                      @click="()=>lookFigure('如开户许可证、银行电子回执单、银行印鉴卡等，需要体现对公户信息及银行签章','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/461761556267437.png')"
                    >查看示例图</div>
                  </div>
                </div>
                <div class="item-rt">
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzIndustryLicensePhoto"
                    @click="chooseImg('yzIndustryLicensePhoto')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/group.png')" />
                  </div>
                  <div
                    class="store-head-box border-solid"
                    v-else-if="formData.yzIndustryLicensePhoto"
                  >
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzIndustryLicensePhoto,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzIndustryLicensePhoto)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzIndustryLicensePhoto')"
                      v-if="query.code!='1000170311'"
                    ></span>
                  </div>
                   <div class="unload">{{ formData.yzIndustryLicensePhoto ? '凭证照片' : '上传照片' }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required" v-html="formData.accountType == '02'?'对公开户名':'开户名'"></div>
                <!-- 非法人可以更改，其他都不允许更改 -->
                <inputClear
                  :disabled="(formData.settleAccountsType != '2')||query.code=='1000170311'||query.code=='1000170312'||query.code=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1 || query['rateToOpenPay']"
                  class="input"
                  @blur="fieldValidate('bankCertName')"
                  v-model="formData.bankCertName"
                  placeholder="请填写开户人名称"
                  :attr="{ maxlength: 64}"
                ></inputClear>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required" v-html="formData.accountType == '02'?'对公银行账号':'银行账号'"></div>
                <inputClear
                  :disabled="query.code=='1000170311'||query.code=='1000170312'||query.code=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1"
                  class="input"
                  @blur="fieldValidate('bankCardNo')"
                  v-model="formData.bankCardNo"
                  placeholder="请填写银行账号"
                  :attr="{ maxlength: 28}"
                ></inputClear>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div
                  class="label required"
                  v-html="formData.accountType == '02'?'对公开户行所在地区':'开户行所在地区'"
                ></div>
                <selectAreaPicker
                  @handleOk="selectAreaPickerOk"
                  @resOk="branchAreaOk('noPublic')"
                  type="branch"
                  :initialData="storeAreaDefaultData"
                  :detailData="initialData"
                  :query="query"
                />
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required" v-html="formData.accountType == '02'?'对公开户银行':'开户银行'"></div>
                <div
                  class="pick-value select no-select"
                  v-if="query.code=='1000170311'"
                >{{formData.bankId?showIdName(bank.data,formData.bankId):bank.tip}}</div>
                <div
                  :class="`pick-value select ${this.formData.bankId?'':'no-select'}`"
                  @click="showPicker('bank')"
                  v-else
                >{{formData.bankId?showIdName(bank.data,formData.bankId):bank.tip}}</div>
                <i class="zhk-list_rarrow"></i>
                <awesome-picker
                  v-if="bankVisible"
                  ref="bank"
                  :textTitle="bank.textTitle"
                  :data="bank.data"
                  :anchor="bank.anchor"
                  @confirm="(v)=>handleConfirm('bank',v,bank.data)"
                ></awesome-picker>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required" v-html="formData.accountType == '02'?'对公支行名称':'支行名称'"></div>
                <div
                  class="pick-value select no-select"
                  v-if="query.code=='1000170311'"
                >{{formData.branchName?formData.branchName:'请选择'}}</div>
                <div
                  :class="`pick-value select ${this.formData.branchName?'':'no-select'}`"
                  @click="showBranchName(true,'noPublic')"
                  v-else
                >{{formData.branchName?formData.branchName:'请选择'}}</div>
                <i class="zhk-list_rarrow"></i>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required" v-html="formData.accountType == '02'?'对公联行号':'联行号'"></div>
                <inputClear
                  :disabled="query.code == '1000170311'"
                  class="input"
                  @blur="fieldValidate('contactLine')"
                  v-model="formData.contactLine"
                  placeholder="请填写联行号"
                  :attr="{ maxlength: 12}"
                ></inputClear>
              </div>
            </div>
          </div>
          <div
            :class="`${(merchantType !='01' && !(merchantType == '02' && formData.accountType == '01'))?'input-item':'input-item-last'}`"
          >
            <div class="itemBox">
              <div class="item">
                <div class="label required">银行预留手机号</div>
                <inputClear
                  :disabled="query.code == '1000170311'"
                  class="input"
                  type="tel"
                  @blur="fieldValidate('accountPhone')"
                  v-model="formData.accountPhone"
                  placeholder="请填写银行预留手机号"
                  :attr="{ maxlength: 11}"
                ></inputClear>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 非法人开户人信息 -->
      <div v-if="formData.settleAccountsType == '2'">
        <div class="tt">非法人开户人信息</div>
        <div class="ct ct-last">
          <div class="upload-item">
            <div class="item">
              <div class="item-tt required">非法人结算证明</div>
              <div class="item-ct">
                <div class="item-lft">
                  <div class="warn-text">请注意证件上的文字能够清晰可见</div>
                  <div class="img-button">
                    <div
                      class="look-img"
                      @click="()=>lookFigure('请注意证件上的文字能够清晰可见',' https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/402331556266728.png')"
                    >查看示例图</div>
                  </div>
                </div>
                <div class="item-rt">
                  <div
                    class="store-head-box border-dashed"
                    v-if="!formData.yzImgUnincorporated"
                    @click="chooseImg('yzImgUnincorporated')"
                  >
                    <img class="imgOpcity" :src="require('../../assets/images/tongyong.png')" />
                  </div>
                  <div class="store-head-box border-solid" v-else-if="formData.yzImgUnincorporated">
                    <img
                      :src="CommonUtil.imgUrlFormate(formData.yzImgUnincorporated,{w:'330',h:'206'})"
                      alt
                      @click="showImg(formData.yzImgUnincorporated)"
                    />
                    <span
                      class="sl-cwts"
                      @click="delImage('yzImgUnincorporated')"
                      v-if="query.code!='1000170311'"
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="upload-item">
            <div class="item">
              <div class="item-tt required">身份证正面照</div>
              <div class="item-ct">
                <div class="item-lft">
                  <div class="warn-text">请注意证件上的文字能够清晰可见</div>
                  <div class="img-button">
                    <div
                      class="look-img"
                      @click="()=>lookFigure('请注意证件上的文字能够清晰可见',' https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/312941556267257.png')"
                    >查看示例图</div>
                  </div>
                </div>
                <div class="item-rt">
                  <template v-if="query.code||query['page'] == 'ratesChangeApply'">
                    <div
                      class="store-head-box border-dashed"
                      v-if="!formData.yzImgPrivateIdcardA"
                      @click="chooseImg('yzImgPrivateIdcardA')"
                    >
                      <img class="imgOpcity" :src="require('../../assets/images/idcard_z.png')" />
                    </div>
                    <div
                      class="store-head-box border-solid"
                      v-else-if="formData.yzImgPrivateIdcardA"
                    >
                      <img
                        :src="CommonUtil.imgUrlFormate(formData.yzImgPrivateIdcardA,{w:'330',h:'206'})"
                        alt
                        @click="showImg(formData.yzImgPrivateIdcardA)"
                      />
                      <span
                        class="sl-cwts"
                        @click="delImage('yzImgPrivateIdcardA')"
                        v-if="query.code!='1000170311'"
                      ></span>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      class="store-head-box border-dashed"
                      v-if="!formData.yzImgPrivateIdcardA"
                      @click="chooseImg('yzImgPrivateIdcardA','ocr_bank_idcard_front')"
                    >
                      <img class="imgOpcity" :src="require('../../assets/images/idcard_z.png')" />
                    </div>
                    <div
                      class="store-head-box border-solid"
                      v-else-if="formData.yzImgPrivateIdcardA"
                    >
                      <img
                        :src="CommonUtil.imgUrlFormate(formData.yzImgPrivateIdcardA,{w:'330',h:'206'})"
                        alt
                        @click="showImg(formData.yzImgPrivateIdcardA)"
                      />
                      <span
                        class="sl-cwts"
                        @click="delImage('yzImgPrivateIdcardA')"
                        v-if="query.code!='1000170311'"
                      ></span>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div class="upload-item">
            <div class="item">
              <div class="item-tt required">身份证反面照</div>
              <div class="item-ct">
                <div class="item-lft">
                  <div class="warn-text">请注意证件上的文字能够清晰可见</div>
                  <div class="img-button">
                    <div
                      class="look-img"
                      @click="()=>lookFigure('请注意证件上的文字能够清晰可见','https://jindd-prod-image.oss-cn-beijing.aliyuncs.com/2019/04/26/16/825891556267271.png')"
                    >查看示例图</div>
                  </div>
                </div>
                <div class="item-rt">
                  <template v-if="query.code||query['page'] == 'ratesChangeApply'">
                    <div
                      class="store-head-box border-dashed"
                      v-if="!formData.yzImgPrivateIdcardB"
                      @click="chooseImg('yzImgPrivateIdcardB')"
                    >
                      <img class="imgOpcity" :src="require('../../assets/images/idcard_f.png')" />
                    </div>
                    <div
                      class="store-head-box border-solid"
                      v-else-if="formData.yzImgPrivateIdcardB"
                    >
                      <img
                        :src="CommonUtil.imgUrlFormate(formData.yzImgPrivateIdcardB,{w:'330',h:'206'})"
                        alt
                        @click="showImg(formData.yzImgPrivateIdcardB)"
                      />
                      <span
                        class="sl-cwts"
                        @click="delImage('yzImgPrivateIdcardB')"
                        v-if="query.code!='1000170311'"
                      ></span>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      class="store-head-box border-dashed"
                      v-if="!formData.yzImgPrivateIdcardB"
                      @click="chooseImg('yzImgPrivateIdcardB','ocr_bank_idcard_back')"
                    >
                      <img class="imgOpcity" :src="require('../../assets/images/idcard_f.png')" />
                    </div>
                    <div
                      class="store-head-box border-solid"
                      v-else-if="formData.yzImgPrivateIdcardB"
                    >
                      <img
                        :src="CommonUtil.imgUrlFormate(formData.yzImgPrivateIdcardB,{w:'330',h:'206'})"
                        alt
                        @click="showImg(formData.yzImgPrivateIdcardB)"
                      />
                      <span
                        class="sl-cwts"
                        @click="delImage('yzImgPrivateIdcardB')"
                        v-if="query.code!='1000170311'"
                      ></span>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="itemBox">
              <div class="item">
                <div class="label required">非法人身份证号</div>
                <inputClear
                  :disabled="query.code=='1000170311'||query.code=='1000170312'||query.code=='1000170313'||query['page'] == 'ratesChangeApply' || initialData.isEntryStatus == 1 || query['rateToOpenPay']"
                  class="input"
                  @blur="fieldValidate('certNo')"
                  v-model="formData.certNo"
                  placeholder="请填写非法人身份证号"
                  :attr="{ maxlength: 18}"
                ></inputClear>
              </div>
            </div>
          </div>
          <div class="input-item-last">
            <div class="itemBox">
              <div class="item">
                <div class="label required">身份证有效期</div>
                <div
                  class="pick-value select no-select"
                  v-if="query.code=='1000170311'"
                >{{this.formData.merchantIdExpireStart&&this.formData.merchantIdExpire?changeMoment(this.formData.merchantIdExpireStart) + ' 至 ' + (this.formData.merchantIdExpire == '29991231'?'长期':(this.formData.merchantIdExpire + '年')):merchantIdExpireStart.tip}}</div>
                <div
                  :class="`pick-value select ${this.formData.merchantIdExpireStart&&this.formData.merchantIdExpire?'':'no-select'}`"
                  @click="showPeriod('merchantIdExpireStart')"
                  v-else
                >{{this.formData.merchantIdExpireStart&&this.formData.merchantIdExpire?changeMoment(this.formData.merchantIdExpireStart) + ' 至 ' + (this.formData.merchantIdExpire == '29991231'?'长期':(this.formData.merchantIdExpire + '年')):merchantIdExpireStart.tip}}</div>
                <i class="sl-right_arrow"></i>
                <mt-datetime-picker
                  ref="merchantIdExpireStart"
                  type="date"
                  :startDate="new Date('1971-01-01')"
                  :endDate="new Date()"
                  :v-model="formData.merchantIdExpireStartValue"
                  @confirm="(v)=>showPeriod('merchantIdExpire','merchantIdExpireStart',v)"
                ></mt-datetime-picker>
                <!-- <awesome-picker ref="merchantIdExpireStart" type="date" :textTitle="merchantIdExpireStart.textTitle"  :anchor="merchantIdExpireStart.anchor"  @confirm="(v)=>showPeriod('merchantIdExpire','merchantIdExpireStart',v)">
                </awesome-picker>-->
                <awesome-picker
                  ref="merchantIdExpire"
                  :textTitle="merchantIdExpire.textTitle"
                  :data="merchantIdExpire.data"
                  :anchor="merchantIdExpire.anchor"
                  @cancel="()=>periodCancel('merchantIdExpireStart')"
                  @confirm="(v)=>periodConfirm('merchantIdExpire',v,merchantIdExpire.data,'merchantIdExpireStart')"
                ></awesome-picker>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sumbmit">
      <mt-button class="btn" type="primary" @click="submit">下一步</mt-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DatetimePicker, Toast, MessageBox } from "mint-ui";
import jsBridge from "../../tools/jsBridge";
import inputClear from "../../components/inputClear/inputClear";
import selectBranch from "./selectBranch";
import selectAreaPicker from "./selectAreaPicker";
import AwesomePicker from "vue-awesome-picker";
import moment from "moment";
Vue.use(AwesomePicker);
export default {
  name: "openPaymentStep2",
  data() {
    return {
      scrollTop: 0,   
      merchantType: "03", //商户类型  01自然人  02个体工商户  03企业商户
      merchantIdExpireStartValue: "",
      CommonUtil: CommonUtil,
      bankToPublicVisible: false,
      //选择照片配置
      bankVisible: false,
      actions: [],
      chooseImgVisible: false,
      //经营类目拼接字段
      mccSpliceName: "",
      //门店区域拼接字段show
      storeAreaName: "",
      //开户行所在地区拼接字段
      branchAreaName: "",
      bankItemVisible: "",
      // 公户开户行所在地区
      storeAreaDefaultDataToPublic: {
        province: "",
        provinceName: "",
        city: "",
        cityName: "",
        district: "",
        districtName: ""
      },
      storeAreaDefaultData: {
        province: "",
        provinceName: "",
        city: "",
        cityName: "",
        district: "",
        districtName: ""
      },
      //支行名称选择
      selectBranchToPublicVisible: false,
      selectBranchVisible: false,
      branchNameListData: [],
      branchNameListDataToPublic: [], //支行名称列表对公
      formData: {
        yzIndustryLicensePhoto: "", //对公户凭证照
        reserveBankCertName: "", //公户开户名
        reserveBankCardNo: "", //公户银行账号
        reserveBankCode: "", //公户开户银行名字
        reserveBankId: "", //公户开户银行ID
        reserveBranchName: "", //公户支行名称
        reserveBranchProvince: "", //开户行省code
        reserveBranchProvinceName: "", //开户行省名称
        reserveBranchCity: "", //开户行城市code
        reserveBranchCityName: "", //开户行城市名称
        reserveContactLine: "", //公户联行号
        accountType: '02', //账户类型   01 对私   02 对公  //
        settleAccountsType: "", //结算账户   1 法人  2 非法人
        yzImgBankcardA: "", //银行卡正面照
        bankCertName: "", //开户名
        bankCardNo: "", //银行账号
        branchProvince: "", //开户行省code
        branchProvinceName: "", //开户行省名称
        branchCity: "", //开户行城市code
        branchCityName: "", //开户行城市名称
        bankId: "", //开户银行ID
        bankCode: "", //开户银行名字
        branchName: "", //支行名称
        contactLine: "", //联航号
        accountPhone: "", //银行预留手机号
        yzImgUnincorporated: "", //非法人结算证明
        certNo: "",
        yzImgPrivateIdcardA: "", //身份证正面照
        yzImgPrivateIdcardB: "", //身份证反面照
        merchantIdExpireStart: "", //有效期开始时间
        merchantIdExpire: "" //有效期年限
      },
      ocrData: {
        certNoOcr: "", //身份证号
        bankCertNameOcr: "", //姓名
        bankIdcardNationalityOcr: "", //民族
        bankIdcardSexOcr: "", //性别
        bankIdcardBirthOcr: "", //出生日期
        bankIdcardAddressOcr: "", //地址信息
        merchantIdExpireStartOcr: "", //有效期起始时间
        merchantIdExpireOcr: "", //有效期结束时间
        bankIdcardIssueOcr: "", //签发机关
        bankCardNoOcr: "", //银行卡账号
        bankCardNameOcr: "" //银行卡名字
      },
      //账户类型
      accountType: {
        tip: "请选择",
        anchor: [0],
        textTitle: "账户类型",
        data: []
      },
      //结算账户
      settleAccountsType: {
        tip: "请选择",
        anchor: [0],
        textTitle: "结算账户",
        data: []
      },
      //公户开户银行
      bankToPublic: {
        tip: "请选择",
        anchor: [0],
        textTitle: "公户开户银行",
        data: []
      },
      //开户银行
      bank: {
        tip: "请选择",
        anchor: [0],
        textTitle: "开户银行",
        data: []
      },
      //身份证有效期
      merchantIdExpireStart: {
        tip: "请选择",
        anchor: [],
        textTitle: "身份证有效期"
      },
      //身份证有效期使用年限
      merchantIdExpire: {
        anchor: [],
        textTitle: "使用年限",
        data: []
      }
    };
  },
  props: {
    initialData: Object,
    dictionaryData: Object,
    editorType: String,
    query: Object,
  },
  watch: {
    initialData: {
      handler(val) {
        if (JSON.stringify(val) != "{}" && val) {
          // if (JSON.stringify(val.bankcardModel) != "{}") {
          this.initialMerChantData(val);
          // }
        }
        this.$forceUpdate();
      },
      deep: true
    },
    formData: {
      handler(val) {
        const backData = {
          bankcardModel: val
        };
        this.$emit("backDataModel", backData);
      },
      deep: true
    },
    dictionaryData: {
      handler(val) {
        if (JSON.stringify(val) != "{}") {
          this.accountType.data = this.repeatPickerData(val.accountType);
          this.merchantIdExpire.data = this.repeatPickerData(val.iDCardExpire);
          this.settleAccountsType.data = this.repeatPickerData(val.settleType);
        }
      },
      deep: true
    }
  },
  mounted() {
    // $('.page-body').scroll(()=>{
    //    //开始监听滚动条
    // 		var top = $('.page-body').scrollTop();  //滚动条距离顶部的高度
    //     this.scrollTop = top;
    // 	})
    if (JSON.stringify(this.initialData) != "{}" && this.initialData) {
      // this.formData.accountType = "02";
      // this.formData.settleAccountsType = "";


      if (JSON.stringify(this.initialData.bankcardModel) != "{}") {
        this.initialMerChantData(this.initialData);
      }
      if (JSON.stringify(this.dictionaryData) != "{}") {
        this.accountType.data = this.repeatPickerData(this.dictionaryData.accountType);
        this.merchantIdExpire.data = this.repeatPickerData(this.dictionaryData.iDCardExpire);
        this.settleAccountsType.data = this.repeatPickerData(this.dictionaryData.settleType);
      }
    }
    this.$forceUpdate();
  },
  methods: {
    momentAnchor(key, val) {
      this[key].anchor = [];
      const year = moment(val).format("YYYY");
      const mouth = moment(val).format("MM");
      const days = moment(val).format("DD");
      this[key].anchor = [year - 1900, mouth - 1, days - 1];
    },
    anchor(key, val, data) {
      this[key].anchor = [];
      data.map((item, index) => {
        if (item.key == val) {
          this[key].anchor.push(index);
        }
      });
    },
    mccAnchor(key, val, data) {
      this[key].anchor = [];
      if (val) {
        const mccRoute = val.split(",");
        mccRoute.map((item, index) => {
          for (let i = 0; i < data[index]; i++) {
            if (item == data[index][i].key) {
              this[key].anchor.push(i);
            }
          }
        });
      }
    },
    lookFigure(text, imgUrl) {
      MessageBox.close(false);
      MessageBox({
        title: "",
        message: `<div class='figureImg'><img src="${imgUrl}" /></div><div class='figureText'><p>${text}</p></div>`,
        confirmButtonText: "知道了"
      });
    },
    //处理picker数据key value 形式
    repeatPickerData(data) {
      return data.map((item, index) => {
        return {
          key: item.code,
          value: item.name
        };
      });
    },
    //初始化进件返回数据
    initialMerChantData(datas) {
      const data = datas.bankcardModel;
      for (let key in data) {
        for (let formKey in this.formData) {
          if (key == formKey) {
            this.formData[formKey] = data[key];
          }
        }
      }
      if (this.initialData.detailModel.merchantType == "01") {
        this.formData.bankCertName = this.initialData.detailModel.principalPerson;
      }
      this.merchantType = this.initialData.detailModel.merchantType;
      //自然人 对私
      if (this.initialData.detailModel.merchantType == "01") {
        this.formData.accountType = "01";
        this.formData.settleAccountsType = "1";
        this.formData.yzIndustryLicensePhoto = "";
      }
      if (this.initialData.detailModel.merchantType == "02" && this.initialData.detailModel.licenseType == "0") {
        this.formData.accountType = "02";
        this.formData.settleAccountsType = "";
      }
      this.storeAreaDefaultDataToPublic.province = this.formData.reserveBranchProvince || "";
      this.storeAreaDefaultDataToPublic.provinceName = this.formData.reserveBranchProvinceName || "";
      this.storeAreaDefaultDataToPublic.city = this.formData.reserveBranchCity || "";
      this.storeAreaDefaultDataToPublic.cityName = this.formData.reserveBranchCityName || "";

      this.storeAreaDefaultData.province = this.formData.branchProvince || "";
      this.storeAreaDefaultData.provinceName = this.formData.branchProvinceName || "";
      this.storeAreaDefaultData.city = this.formData.branchCity || "";
      this.storeAreaDefaultData.cityName = this.formData.branchCityName || "";
      if (this.formData.merchantIdExpireStart) {
        this.merchantIdExpireStartValue = moment(this.formData.merchantIdExpireStart).format("YYYY-MM-DD");
      }
      if (this.formData.accountType == "02") {
        this.formData.bankCertName = datas.detailModel.merchantCompany;
      }
      if (this.formData.accountType == "01" && this.formData.settleAccountsType == "1") {
        this.formData.bankCertName = datas.detailModel.principalPerson;
      }

      if (datas.detailModel.merchantType != "01" && !(datas.detailModel.merchantType == "02" && this.formData.accountType == "01")) {
        this.formData.reserveBankCertName = datas.detailModel.merchantCompany;
      }

      this.momentAnchor("merchantIdExpireStart", this.formData.merchantIdExpireStart);
      this.anchor("merchantIdExpire", this.formData.merchantIdExpire, this.merchantIdExpire.data);
      this.anchor("settleAccountsType", this.formData.settleAccountsType, this.settleAccountsType.data);
      this.anchor("accountType", this.formData.accountType, this.accountType.data);
    },
    branchAreaOk(isPublic) {
      if (isPublic == "toPublic") {
        if (this.formData.reserveBranchProvince && this.formData.reserveBranchCity) {
          this.getBank("init", isPublic);
        }
      } else if (isPublic == "noPublic") {
        if (this.formData.branchProvince && this.formData.branchCity) {
          this.getBank("init", isPublic);
        }
      }
    },
    //开户银行
    getBank(type, isPublic) {
      // debugger;
      let province = "";
      let city = "";
      if (isPublic == "toPublic") {
        province = this.formData.reserveBranchProvince || "";
        city = this.formData.reserveBranchCity || "";
      } else if (isPublic == "noPublic") {
        province = this.formData.branchProvince || "";
        city = this.formData.branchCity || "";
      }
      this.ajax({
        type: "get",
        url: "/merchant/dic/main/banks.do?province=" + province + "&city=" + city,
        controlLoading: false
      })
        .then(response => {
          if (response && response.success) {
            const bankData = response.resultObject;
            //对开户银行数据处理
            if (isPublic == "toPublic") {
              this.bankToPublic.data = this.resetBankData(bankData);
            } else if (isPublic == "noPublic") {
              this.bank.data = this.resetBankData(bankData);
            }

            if (type == "init") {
              if (isPublic == "toPublic") {
                this.anchor("bankToPublic", this.formData.reserveBankId, this.bankToPublic.data);
                if (this.formData.reserveBankId) {
                  this.getBranchName(isPublic);
                }
              } else if (isPublic == "noPublic") {
                this.anchor("bank", this.formData.bankId, this.bank.data);
                if (this.formData.bankId) {
                  this.getBranchName(isPublic);
                }
              }
            }
            if (isPublic == "toPublic") {
              this.bankToPublicVisible = true;
            } else if (isPublic == "noPublic") {
              this.bankVisible = true;
            }
          } else {
            Toast("加载开户银行失败");
          }
        })
        .catch(err => {
          if (isPublic == "toPublic") {
            this.bankToPublicVisible = true;
          } else if (isPublic == "noPublic") {
            this.bankVisible = true;
          }
          MessageBox.close(false);
          MessageBox.alert("获取数据异常，请重新选择开户行所在地区").then(action => { });
        });
    },
    //开户银行数据处理
    resetBankData(data) {
      const newData = [];
      data.map(item => {
        const obj = {
          key: item.bankId,
          value: item.bankMainName
        };
        newData.push(obj);
      });
      return newData;
    },
    //获取支行名称
    getBranchName(isPublic) {
      // debugger;
      let province = "";
      let city = "";
      let bankId = "";
      if (isPublic == "toPublic") {
        province = this.formData.reserveBranchProvince || "";
        city = this.formData.reserveBranchCity || "";
        bankId = this.formData.reserveBankId || "";
      } else if (isPublic == "noPublic") {
        province = this.formData.branchProvince || "";
        city = this.formData.branchCity || "";
        bankId = this.formData.bankId || "";
      }
      this.ajax({
        type: "get",
        url: "/merchant/dic/branch/banks.do?province=" + province + "&city=" + city + "&mainBankId=" + bankId,
        controlLoading: false
      })
        .then(response => {
          if (response && response.success) {
            const branchData = response.resultObject;
            //对开户银行数据处理
            if (isPublic == "toPublic") {
              this.branchNameListDataToPublic = this.resetBranchData(branchData);
            } else if (isPublic == "noPublic") {
              this.branchNameListData = this.resetBranchData(branchData);
            }
          } else {
            Toast("加载支行名称失败");
          }
        })
        .catch(err => {
          MessageBox.close(false);
          MessageBox.alert("获取数据异常，请重新选择开户银行").then(action => { });
        });
    },
    //支行名称数据处理
    resetBranchData(data) {
      const newData = [];
      data.map(item => {
        const obj = {
          key: item.contactLine,
          value: item.bankName
        };
        newData.push(obj);
      });
      return newData;
    },
    principalNameLb() {
      switch (this.formData.merchantType) {
        case "03":
          return "法人";
          break;
        case "02":
          return "经营者";
          break;
        case "01":
          return "申请人";
          break;
        default:
          return "法人";
      }
    },
    showBranchName(flag, isPublic) {
      // debugger;
      if (isPublic == "toPublic") {
        this.selectBranchToPublicVisible = flag;
      } else if (isPublic == "noPublic") {
        this.selectBranchVisible = flag;
      }

      this.$emit("modelRturn", flag);
      if (flag) {
        // document.getElementsByClassName('main-page-body')[0].scrollTo(0,0);
        //$('.main-page-body').scrollTop(0);
        $(".mint-popup").css({ position: "absolute" });
        $(".main-page-body").css({ "overflow-y": "hidden", position: "static" });
      } else {
        $(".mint-popup").css({ position: "fixed" });
        $(".main-page-body").css({ "overflow-y": "auto", position: "relative" });
      }
    },
    //选择图片的方式本地相册或者拍照,如果传ocr需要进行ocr图像识别
    repeatImgUrl(url, resize) {
      if (resize) {
        return CommonUtil.getThumbnail(url);
      }
      return CommonUtil.getThumbnail(url);
    },
    chooseImg: function (type, ocr) {
      var _this = this;
      _this.actions = [
        {
          name: "拍照",
          method: function () {
            jsBridge.selectPicture(
              { options: "拍照", noCrop: true, compress: { sizeLimit: "1", unit: "M" } },
              function (result) {
                _this.doUploadPic(type, result, ocr);
              },
              function (result) {
              }
            );
          }
        },
        {
          name: "选择图片",
          method: function () {
            jsBridge.selectPicture(
              {
                options: "选择图片",
                noCrop: true,
                compress: { sizeLimit: "1", unit: "M" }
              },
              function (result) {
                _this.doUploadPic(type, result, ocr);
              },
              function (result) {
              }
            );
          }
        }
      ];

      this.chooseImgVisible = true;
      return false;
    },
    //删除图片
    delImage(key) {
      this.formData[key] = "";
    },
    showImg: function (url) {
      let urlArr = [];
      urlArr.push(CommonUtil.imgUrlFormate(url));
      try {
        jsBridge.viewPicture({ files: urlArr }, function (params) {

        });
      } catch (e) {
        Toast("预览失败");
      }
    },
    //上传图片到服务器
    doUploadPic: function (type, result, ocr) {
      var url = "image/upload.do";
      let params = {};
      //身份证正面ocr
      if (ocr == "ocr_bank_idcard_front") {
        url = "image/ocr.do"; //ocr识别上传地址
        params.imgOcrType = "ocr_idcard";
        params.cardSide = "front";
      }
      //身份证反面ocr
      if (ocr == "ocr_bank_idcard_back") {
        url = "image/ocr.do"; //ocr识别上传地址
        params.imgOcrType = "ocr_idcard";
        params.cardSide = "back";
      }
      if (ocr == "ocr_bankcard") {
        url = "image/ocr.do"; //ocr识别上传地址
        params.imgOcrType = "ocr_bankcard";
      }

      jsBridge.doUploadPic(
        {
          url: url,
          file: result.resultObject,
          data: params,
          //限制图片压缩后的大小最大1.2M
          compress: { sizeLimit: "1", unit: "M" }
        },
        result => {
          //以下为正常的业务逻辑
          if (result && result.success) {
            var uploadResult = result.resultObject.imageUrl || result.resultObject;
            if (uploadResult) {
              var url = uploadResult;
              if (typeof this.formData[type] == "string" || this.formData[type] == null) {
                this.formData[type] = url;
              }
              if (typeof this.formData[type] == "object") {
                this.formData[type].push(url);
              }
            }
            var resultObject = result.resultObject;
            if (ocr) {
              if (resultObject.ocrSuccess && Object.keys(JSON.parse(resultObject.ocrResult)).length != 0) {
                let ocrData = JSON.parse(resultObject.ocrResult); //ocr识别出的数据
                const formData = this.formData; //表单填写的数据
                //收款账户身份证正面
                if (ocr == "ocr_bank_idcard_front") {
                  let flag = false;
                  let messageText = "";
                  if (!formData.certNo || formData.certNo == ocrData.num) {
                    this.formData.certNo = ocrData.num;
                  } else {
                    if (ocrData.num) {
                      flag = true;
                      messageText = messageText + "<div style='display:flex'><div>" + "身份证号：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" + ocrData.num + "</div></div>";
                    }
                  }
                  if (!formData.bankCertName || formData.bankCertName == ocrData.name) {
                    this.formData.bankCertName = ocrData.name;
                  } else {
                    if (ocrData.name) {
                      flag = true;
                      messageText =
                        messageText +
                        "<div style='display:flex'><div>" +
                        this.principalNameLb() +
                        "开户名：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" +
                        ocrData.name +
                        "</div></div>";
                    }
                  }

                  this.ocrData.certNoOcr = ocrData.num || ""; //身份证号
                  this.ocrData.bankCertNameOcr = ocrData.name || ""; //姓名
                  this.ocrData.bankIdcardNationalityOcr = ocrData.nationality || ""; //民族
                  this.ocrData.bankIdcardSexOcr = ocrData.sex || ""; //性别
                  this.ocrData.bankIdcardBirthOcr = ocrData.birth || ""; //出生日期
                  this.ocrData.bankIdcardAddressOcr = ocrData.address || ""; //地址信息
                  if (flag) {
                    this.checkOrcReturn(messageText, "ocr_bank_idcard_front");
                  }
                }
                //收款账户身份证反面
                if (ocr == "ocr_bank_idcard_back") {
                  let flag = false;
                  let messageText = "";
                  //身份证有效期
                  let startDate = ocrData.startDate ? ocrData.startDate : ""; //ocr返回的是‘20190101’转换成‘2019-01-02’格式
                  let endDate = ocrData.endDate ? ocrData.endDate : "";
                  const startYear = moment(startDate.replace(/-/g, "/")).format("YYYY");
                  const endYear = moment(endDate.replace(/-/g, "/")).format("YYYY");
                  let difference = endYear - startYear;
                  if (difference <= 0) {
                    endDate = '';
                  };
                  let differenceFlag = false;
                  this.merchantIdExpire.data.map((item) => {
                    if (difference <= 20) {
                      if (item.key == difference) {
                        differenceFlag = true;
                      }
                    } else {
                      differenceFlag = true;
                    }
                  });
                  if (!differenceFlag) {
                    endDate = '';
                  };
                  if (
                    (!formData.merchantIdExpireStart || formData.merchantIdExpireStart == startDate) &&
                    (!formData.merchantIdExpire || formData.merchantIdExpire == (endDate == "2999-12-31" ? "29991231" : difference))
                  ) {
                    if (startDate && endDate) {
                      this.formData.merchantIdExpireStart = startDate; //起始时间
                      if (difference > 70) {
                        this.formData.merchantIdExpire = "29991231"; //结束时间
                        endDate = "29991231";
                      } else {
                        this.formData.merchantIdExpire = difference;
                        endDate = difference;
                      }
                    } else {
                      this.formData.merchantIdExpireStart = ""; //起始时间
                      this.formData.merchantIdExpire = ""; //结束时间
                    }
                  } else {
                    if (startDate && endDate) {
                      flag = true;
                      if (difference > 20) {
                        endDate = "29991231"; //结束时间
                      } else {
                        endDate = difference;
                      }
                      messageText =
                        messageText +
                        "<div style='display:flex'><div>" +
                        "身份证有效期：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" +
                        startDate +
                        " 至 " +
                        (endDate == "29991231" ? "长期" : difference + "年") +
                        "</div></div>";
                    }
                  }
                  this.ocrData.merchantIdExpireStartOcr = startDate || ""; //有效期起始时间
                  this.ocrData.merchantIdExpireOcr = endDate; //有效期结束时间
                  this.ocrData.bankIdcardIssueOcr = ocrData.issue || ""; //签发机关
                  if (flag) {
                    this.checkOrcReturn(messageText, "ocr_bank_idcard_back");
                  }
                }
                //银行卡
                if (ocr == "ocr_bankcard") {
                  let flag = false;
                  let messageText = "";
                  if (!formData.bankCardNo || formData.bankCardNo == ocrData.num) {
                    this.formData.bankCardNo = ocrData.num;
                  } else {
                    if (ocrData.num) {
                      flag = true;
                      messageText = messageText + "<div style='display:flex'><div>" + "银行账号：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" + ocrData.num + "</div></div>";
                    }
                  }
                  this.ocrData.bankCardNoOcr = ocrData.num || ""; //银行卡账号
                  this.ocrData.bankCardNameOcr = ocrData.bankName || ""; //银行卡名字
                  if (flag) {
                    this.checkOrcReturn(messageText, "ocr_bankcard");
                  }
                }
              } else {
                MessageBox.close(false);
                MessageBox({
                  title: "提示",
                  message: "无法识别图片中的内容，通常是由于图片模糊不清造成，建议更换清晰图片",
                  confirmButtonText: "知道了"
                });
              }
            }

            return;
          }
          var msg = result.msg || "上传失败";
          Toast(msg);
        },
        function (result) {

        }
      );
    },
    //ocr图像识别
    checkOrcReturn(messageText, ocr) {
      MessageBox.close(false);
      MessageBox({
        title: "是否覆盖已有内容",
        message: `<div style="text-align:left">${messageText}</div>`,
        confirmButtonText: "是",
        cancelButtonText: "否",
        showCancelButton: true
      }).then(action => {
        if (action == "confirm") {
          if (ocr == "ocr_bank_idcard_front") {
            this.formData.certNo = this.ocrData.certNoOcr || ""; //身份证号
            this.formData.bankCertName = this.ocrData.bankCertNameOcr || "";
          }
          if (ocr == "ocr_bank_idcard_back") {
            if (this.ocrData.merchantIdExpireStartOcr && this.ocrData.merchantIdExpireOcr) {
              this.formData.merchantIdExpireStart = this.ocrData.merchantIdExpireStartOcr || ""; //有效期起始时间
              this.formData.merchantIdExpire = this.ocrData.merchantIdExpireOcr || ""; //有效期结束时间
            }
          }
          if (ocr == "ocr_bankcard") {
            this.formData.bankCardNo = this.ocrData.bankCardNoOcr || ""; //银行卡账号
          }
        }
      });
    },
    //下拉控件
    showPicker(ref) {
      if (this.$refs[ref]) {
        this.$refs[ref].show();
      }
    },
    selectAreaPickerOkToPublic(data) {
      this.bankToPublicVisible = false;
      const newData = {
        reserveBranchProvince: data.branchProvince,
        reserveBranchProvinceName: data.branchProvinceName,
        reserveBranchCity: data.branchCity,
        reserveBranchCityName: data.branchCityName
      };
      this.formData = Object.assign(this.formData, newData);
      this.storeAreaDefaultDataToPublic.province = this.formData.reserveBranchProvince || "";
      this.storeAreaDefaultDataToPublic.provinceName = this.formData.reserveBranchProvinceName || "";
      this.storeAreaDefaultDataToPublic.city = this.formData.reserveBranchCity || "";
      this.storeAreaDefaultDataToPublic.cityName = this.formData.reserveBranchCityName || "";
      this.bankToPublic.data = [];
      this.branchNameListDataToPublic = [];
      this.formData.reserveBankId = ""; //开户银行ID
      this.formData.reserveBankCode = ""; //开户银行名字
      this.formData.reserveBranchName = ""; //支行名称
      this.formData.reserveContactLine = ""; //联航号
      this.getBank("", "toPublic");
    },
    selectAreaPickerOk(data) {
      this.bankVisible = false;
      this.formData = Object.assign(this.formData, data);
      this.storeAreaDefaultData.province = this.formData.branchProvince || "";
      this.storeAreaDefaultData.provinceName = this.formData.branchProvinceName || "";
      this.storeAreaDefaultData.city = this.formData.branchCity || "";
      this.storeAreaDefaultData.cityName = this.formData.branchCityName || "";
      this.bank.data = [];
      this.branchNameListData = [];
      this.formData.bankId = ""; //开户银行ID
      this.formData.bankCode = ""; //开户银行名字
      this.formData.branchName = ""; //支行名称
      this.formData.contactLine = ""; //联航号
      this.getBank("", "noPublic");
    },
    //弹窗选择回掉赋值
    handleConfirm(key, v, data) {
      if (key == "accountType") {
        this.formData.settleAccountsType = "";
        this.formData.yzImgUnincorporated = ""; //非法人结算证明
        this.formData.yzImgPrivateIdcardA = ""; //身份证正面照
        this.formData.yzImgPrivateIdcardB = ""; //身份证反面照
        this.formData.certNo = "";//非法人身份证号
        this.formData.merchantIdExpireStart = ""; //有效期开始时间
        this.formData.merchantIdExpire = ""; //有效期年限
        this.formData.yzImgBankcardA = "";
        this.formData.yzIndustryLicensePhoto = "";
      }
      if (key == "settleAccountsType") {
        this.formData.yzImgUnincorporated = ""; //非法人结算证明
        this.formData.yzImgPrivateIdcardA = ""; //身份证正面照
        this.formData.yzImgPrivateIdcardB = ""; //身份证反面照
        this.formData.certNo = "";//非法人身份证号
        this.formData.merchantIdExpireStart = ""; //有效期开始时间
        this.formData.merchantIdExpire = ""; //有效期年限
        this.formData.bankCertName = "";
      }
      if (key == "bankToPublic") {
        this.formData.reserveBankId = this.getId(data, v[0].value, 1) || ""; //开户行ID
        this.formData.reserveBankCode = v[0].value;
        this[key].anchor = [v[0].index];
        this.formData.reserveBranchName = ""; //支行名称
        this.formData.reserveContactLine = "";
        this.branchNameListDataToPublic = [];
        this.getBranchName("toPublic");
        return;
      }
      if (key == "bank") {
        this.formData.bankId = this.getId(data, v[0].value, 1) || ""; //开户行ID
        this.formData.bankCode = v[0].value;
        this[key].anchor = [v[0].index];
        this.formData.branchName = ""; //支行名称
        this.formData.contactLine = "";
        this.branchNameListData = [];
        this.getBranchName("noPublic");
        return;
      }
      this[key].anchor = [v[0].index];
      this.formData[key] = this.getId(data, v[v.length - 1].value, v.length);
    },
    changeMoment(date) {
      return moment(date).format("YYYY-MM-DD");
    },
    //有效期弹窗
    showPeriod(key, label, v) {
      this.$refs[key].show ? this.$refs[key].show() : this.$refs[key].open();
      if (v) {
        this.formData[label] = moment(v).format("YYYY-MM-DD");
      }
    },
    //选择使用年限
    periodConfirm(key, v, data, startTime) {
      let diffVal = this.getId(data, v[0].value, 1);
      this.formData[key] = diffVal;
    },
    //不选使用年限清空有效期
    periodCancel(key) {
      this.formData[key] = "";
    },
    //根据value获取key
    getId(data, val, lev) {
      if (lev == 1) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].value == val) {
            return data[i].key || data[i].id;
          }
        }
      }
      if (lev == 2) {
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i].children.length; j++) {
            let lev2Data = data[i].children[j];
            if (lev2Data.value == val) {
              return lev2Data.key || lev2Data.id;
            }
          }
        }
      }
      if (lev == 3) {
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i].children.length; j++) {
            let lev2Data = data[i].children[j];
            for (let n = 0; n < lev2Data.children.length; n++) {
              let lev3Data = lev2Data.children[n];
              if (lev3Data.value == val) {
                return lev3Data.key || lev3Data.id;
              }
            }
          }
        }
      }
      return;
    },
    //根据枚举展示字段名字
    showIdName(data, key) {
      let name = "";
      const checkName = (datas, keys) => {
        for (let i = 0; i < datas.length; i++) {
          if (datas[i].key == keys) {
            name = datas[i].value;
            return;
          }
          if (datas[i].children) {
            checkName(datas[i].children, keys);
          }
        }
      };
      checkName(data, key);
      return name;
    },
    //支行名称选择对私
    selectBranch(params) {
      this.selectBranchVisible = false;
      this.formData.branchName = params.value;
      this.formData.contactLine = params.key;
      this.$emit("modelRturn", false);
      $(".mint-popup").css({ position: "fixed" });
      $(".main-page-body").css({ "overflow-y": "auto", position: "relative" });
    },
    //支行名称选择对公
    selectBranchToPublic(params) {
      this.selectBranchToPublicVisible = false;
      this.formData.reserveBranchName = params.value;
      this.formData.reserveContactLine = params.key;
      this.$emit("modelRturn", false);
      $(".mint-popup").css({ position: "fixed" });
      $(".main-page-body").css({ "overflow-y": "auto", position: "relative" });
    },
    fieldValidate(fieldName) {
      // debugger;
      // if (fieldName == "reserveBankCertName") {
      //   if (!this.formData.reserveBankCertName) {
      //     Toast("请填写公户开户名");
      //     return;
      //   }
      //   if (!/^[\u4e00-\u9fa50-9a-zA-Z（）().·]+$/.test(this.formData.reserveBankCertName)) {
      //     Toast("公户开户名仅可填写汉字,数字,字母,中英文括号,中文·和.");
      //     return;
      //   }
      // }
      // 企业对私
      if (this.merchantType == "03" && this.formData.accountType == "01") {
        if (fieldName == "reserveBankCardNo") {
          if (!this.formData.reserveBankCardNo) {
            Toast("请填写公户银行账号");
            return;
          }
          if (!/^[0-9a-zA-Z]+$/.test(this.formData.reserveBankCardNo)) {
            Toast("公户银行账号仅可填写数字");
            return;
          }
        }
        if (fieldName == "reserveContactLine") {
          if (!this.formData.reserveContactLine) {
            Toast("请填写公户联行号");
            return;
          }
        }
      }

      // 法人对公
      if (this.formData.accountType == "02") {
        if (fieldName == "bankCertName") {
          if (!this.formData.bankCertName) {
            Toast("请填写公户开户名");
            return;
          }
          if (!/^[\u4e00-\u9fa50-9a-zA-Z（）().·]+$/.test(this.formData.bankCertName)) {
            Toast("公户开户名仅可填写汉字,数字,字母,中英文括号,中文·和.");
            return;
          }
        }
        if (fieldName == "bankCardNo") {
          if (!this.formData.bankCardNo) {
            Toast("请填写公户银行账号");
            return;
          }
          if (!/^[0-9a-zA-Z]+$/.test(this.formData.bankCardNo)) {
            Toast("公户银行账号仅可填写数字");
            return;
          }
        }
        if (fieldName == "contactLine") {
          if (!this.formData.contactLine) {
            Toast("请填写公户联行号");
            return;
          }
        }
      } else if (this.formData.accountType != "02") {
        if (fieldName == "bankCertName") {
          if (!this.formData.bankCertName) {
            Toast("请填写开户名");
            return;
          }
          if (!/^[\u4e00-\u9fa50-9a-zA-Z（）().·]+$/.test(this.formData.bankCertName)) {
            Toast("开户名仅可填写汉字,数字,字母,中英文括号,中文·和.");
            return;
          }
        }
        if (fieldName == "bankCardNo") {
          if (!this.formData.bankCardNo) {
            Toast("请填写银行账号");
            return;
          }
          if (!/^[0-9a-zA-Z]+$/.test(this.formData.bankCardNo)) {
            Toast("银行账号仅可填写数字");
            return;
          }
        }
        if (fieldName == "contactLine") {
          if (!this.formData.contactLine) {
            Toast("请填写联行号");
            return;
          }
        }
      }
      if (fieldName == "accountPhone") {
        if (!/^1[0-9]{10}$/.test(this.formData.accountPhone)) {
          Toast("请填写有效手机号");
          return;
        }
      }
      if (this.formData.settleAccountsType == "2") {
        if (fieldName == "certNo") {
          if (!this.formData.certNo) {
            Toast("请输入身份证号码");
            return;
          }
          var test = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
          var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
          if (!reg.test(this.formData.certNo) && !test.test(this.formData.certNo)) {
            Toast("请输入正确的身份证号码");
            return;
          }
        }
      }
    },
    checkData() {
      if (!this.formData.accountType) {
        Toast("请选择账户类型");
        return false;
      }
      if (this.formData.accountType == "01" && this.merchantType != "01") {
        if (!this.formData.settleAccountsType) {
          Toast("请选择结算账户");
          return false;
        }
      }
      // 企业对私
      if (this.merchantType == "03" && this.formData.accountType == "01") {
        if (!this.formData.yzIndustryLicensePhoto) {
          Toast("请上传对公户凭证照");
          return false;
        }
        if (!this.formData.reserveBankCardNo) {
          Toast("请填写公户银行账号");
          return false;
        }
        if (!/^[0-9]+$/.test(this.formData.reserveBankCardNo)) {
          Toast("公户银行账号仅可填写数字");
          return false;
        }
        if (!this.formData.reserveBranchProvince || !this.formData.reserveBranchProvinceName || !this.formData.reserveBranchCity || !this.formData.reserveBranchCityName) {
          Toast("请选择公户开户行所在地区");
          return false;
        }
        if (!this.formData.reserveBankCode) {
          Toast("请选择公户开户银行");
          return false;
        }
        if (!this.formData.reserveBranchName) {
          Toast("请选择公户支行");
          return false;
        }
        if (!this.formData.reserveContactLine) {
          Toast("请填写公户联行号");
          return false;
        }
      }

      // 法人对公
      if (this.formData.accountType == "02") {
        if (!this.formData.yzIndustryLicensePhoto) {
          Toast("请上传对公户凭证照");
          return false;
        }
        if (!this.formData.bankCardNo) {
          Toast("请填写公户银行账号");
          return false;
        }
        if (!/^[0-9]+$/.test(this.formData.bankCardNo)) {
          Toast("公户银行账号仅可填写数字");
          return false;
        }
        if (!this.formData.branchProvince || !this.formData.branchProvinceName || !this.formData.branchCity || !this.formData.branchCityName) {
          Toast("请选择公户开户行所在地区");
          return false;
        }
        if (!this.formData.bankCode) {
          Toast("请选择公户开户银行");
          return false;
        }
        if (!this.formData.branchName) {
          Toast("请选择公户支行");
          return false;
        }
        if (!this.formData.contactLine) {
          Toast("请填写公户联行号");
          return false;
        }
      } else if (this.formData.accountType != "02") {
        if (!this.formData.yzImgBankcardA) {
          Toast("请上传银行卡照片");
          return false;
        }
        if (this.formData.settleAccountsType == "2") {
          if (!this.formData.bankCertName) {
            Toast("请填写开户名");
            return;
          }
        }
        if (!this.formData.bankCardNo) {
          Toast("请填写银行账号");
          return false;
        }
        if (!/^[0-9]+$/.test(this.formData.bankCardNo)) {
          Toast("银行账号仅可填写数字");
          return false;
        }
        if (!this.formData.branchProvince || !this.formData.branchProvinceName || !this.formData.branchCity || !this.formData.branchCityName) {
          Toast("请选择开户行所在地区");
          return false;
        }
        if (!this.formData.bankCode) {
          Toast("请选择开户银行");
          return false;
        }
        if (!this.formData.branchName) {
          Toast("请选择支行");
          return false;
        }
        if (!this.formData.contactLine) {
          Toast("请填写联行号");
          return false;
        }
      }

      if (!this.formData.accountPhone||(!/^1[0-9]{10}$/.test(this.formData.accountPhone))) {
        Toast("请填写有效手机号");
        return false;
      }

      if (this.formData.settleAccountsType == "2") {
        if (!this.formData.yzImgUnincorporated) {
          Toast("请上传非法人结算证明");
          return false;
        }
        if (!this.formData.yzImgPrivateIdcardA) {
          Toast("请上传身份证照片（正面）");
          return false;
        }
        if (!this.formData.yzImgPrivateIdcardB) {
          Toast("请上传身份证照片（反面）");
          return false;
        }
        if (!this.formData.certNo) {
          Toast("请填写身份证号");
          return false;
        }
        var test = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
        var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        if (!reg.test(this.formData.certNo) && !test.test(this.formData.certNo)) {
          Toast("请输入正确的身份证号码");
          return false;
        }
        if (!this.formData.merchantIdExpireStart && !this.formData.merchantIdExpire) {
          Toast("请选择身份证有效期");
          return false;
        }
      }
      return true;
    },
    //下一步
    submit() {
      //我注销的
      // if (!this.checkData()) {
      //   return;
      // }
      this.$emit("nextStep", 2);
    }
  },
  components: {
    inputClear,
    selectBranch,
    selectAreaPicker
  }
};
</script>
<style lang='scss' scoped>
@import "openPayment";
@import './openPay.scss'
</style>
